<template>
	<view class="withdrawal">
		<!-- 用户信息 -->
		<view class="userInfo flex-r-c-c"
			style="background-image: url(https://yft.yangfatang.cn/upload/bg/bg2.png); background-size: 100% 100%;">
			<image :src="dataList.userimg" mode="widthFix"></image>
			<view class="list_r flex-r-b-c">
				<view class="list_r_l">
					<view class="name">{{dataList.nickname}}</view>
					<!-- <view class="titleBtn">{{dataList.rank}}</view> -->
					<view class="titleBtn">会员</view>
				</view>
				<view class="list_r_r">
					<view class="record" @tap.stop="go">提现记录</view>
					<!-- <view style="margin-top: 6rpx; color: #888888;">2018-9-20 12：00</view> -->
				</view>
			</view>
		</view>
		<!-- 提现详情 -->
		<view class="detailsBox">
			<view class="list_t">
				<view class="list_t_t flex-r-b-c">
					<view class="list_t_t_l">提现金额</view>
					<view class="list_t_t_r">可提现金额：{{dataList.balance}}</view>
				</view>
				<view class="list_t_b">
					<!-- <view class="money">¥ <text>460.00</text></view> -->
					<input @input="getInput" style="width: 100%; height: 100%; box-sizing: border-box; padding-left: 20rpx;" placeholder="请填写需要提现金额" type="text" :value="money" />
				</view>
			</view>
			<view class="list flex-r-b-c" v-if="dataList.type == 2">
				<view class="list_l">提现到</view>
				<view class="list_r">零钱包</view>
			</view>
			<view class="list flex-r-b-c" v-if="dataList.type == 1">
				<view class="list_l">银行卡</view>
				<input @input="getAccntno" type="text" :value="accntno" placeholder="请填写" />
			</view>
			<view class="list flex-r-b-c" v-if="dataList.type == 1">
				<view class="list_l">办理银行卡的姓名</view>
				<input @input="getAccntnm" type="text" :value="accntnm" placeholder="请填写" />
			</view>
			<view class="list flex-r-b-c">
				<view class="list_l">姓名</view>
				<view class="list_r">{{dataList.nickname}}</view>
			</view>
			<view class="list flex-r-b-c">
				<view class="list_l">电话</view>
				<view class="list_r">{{dataList.mobile}}</view>
			</view>
			
			
			<view style="width: 100%; margin-top: 30rpx; text-align: center; font-size: 24rpx; color: #999;">自提现申请后的3个工作日之内，到达您的微信余额 </view>
			
			<view class="btn" @tap=" dataList.is_iden == 1 ? tipsBtn() : btn() ">提现</view>
			
			<view class="text" v-if="dataList.is_iden == 1">当前贷款余额为负，请充正货款后提现</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: null,
				dataList: {},
				money: '',
				accntno: '',
				accntnm: '',
			};
		},
		onLoad(el) {
			console.log(el)
			this.type = el.type
			this.getData() // 获取提心信息
		},
		methods: {
			// 获取提心信息
			getData(){
				let that = this
				that.$api.withdrawal_data().then(res => {
					console.log(res)
					that.dataList = res.data.data
					that.accntno = res.data.data.accntno
					that.accntnm = res.data.data.accntnm
				})
			},
			// 提现记录
			go(){
				// uni.showToast({
				// 	title: '暂不支持',
				// 	icon: 'none'
				// })
				uni.navigateTo({
					url: '/distribution/withdrawalRecord/withdrawalRecord'
				})
			},
			// 获取 input 提现金额
			getInput(e){
				console.log(e)
				this.money = e.detail.value
			},
			// 获取办理银行卡名字
			getAccntnm(e){
				console.log(e)
				this.accntnm = e.detail.value
			},
			// 获取银行卡号
			getAccntno(e){
				console.log(e)
				this.accntno = e.detail.value
			},
			// 提示
			tipsBtn(){
				uni.showToast({
					title: '暂不能提现',
					icon: 'none'
				})
			},
			// 提现
			btn(){
				let that = this
				if(Number(that.money) <= 0){
					uni.showToast({
						title: '请输入正确的提现金额',
						icon: 'none'
					})
				} else {
					that.$api.application({price: that.money, type: that.dataList.type, accntnm: that.accntnm , accntno: that.accntno }).then(res => {
						console.log(res)
						that.money = ''
						uni.showToast({
							title: '提现请求以提交，请等待后台审核',
							icon: 'none'
						})
					})
				}
			}
		}
	}
</script>

<style lang="less">
	.withdrawal {
		.userInfo {
			width: 90vw;
			height: 208rpx;
			margin: 30rpx auto;

			image {
				width: 120rpx;
				height: 120rpx;
				margin-right: 20rpx;
				border-radius: 50%;
			}

			.list_r {
				width: 65%;

				.list_r_l {
					.name {
						font-size: 32rpx;
						font-weight: 500;
						color: #292929;
					}

					.titleBtn {
						width: 120rpx;
						height: 42rpx;
						line-height: 42rpx;
						text-align: center;
						border-radius: 30rpx;
						background: linear-gradient(180deg, #FCD8A0 0%, #EABD6E 100%);
						color: #4B4B4B;
						font-size: 24rpx;
						font-weight: 500;
						margin-top: 10rpx;
					}

					.time {
						font-size: 20rpx;
						font-weight: 500;
						color: #888888;
						margin-top: 10rpx;
					}
				}

				.list_r_r {
					text-align: center;
					color: #4B4B4B;
					font-size: 24rpx;
					font-weight: 500;
					.record{
						width: 164rpx;
						height: 62rpx;
						margin: 0 auto;
						line-height: 62rpx;
						text-align: center;
						color: #45806E;
						font-size: 26rpx;
						font-weight: 500;
						border: 1px solid #45806E;
						border-radius: 60rpx;
					}
				}
			}
		}
		// 
		.detailsBox{
			width: 90vw;
			height: auto;
			background: #FFFFFF;
			box-sizing: border-box;
			padding: 30rpx;
			margin: 0 auto;
			border-radius: 10rpx;
			.list_t{
				.list_t_t{
					color: #6C6C6C;
					font-size: 28rpx;
					.list_t_t_r{
						font-size: 24rpx;
					}
				}
				.list_t_b{
					width: 100%;
					height: 88rpx;
					margin: 10rpx auto;
					border-radius: 10rpx;
					background: #F5F5F5;
					.money{
						width: 100%;
						box-sizing: border-box;
						padding: 20rpx;
						color: #FF7B34;
						font-size: 36rpx;
						text{
							display: inline-block;
							font-weight: 500;
							font-size: 44rpx;
						}
					}
				}
			}
			.list{
				height: 88rpx;
				line-height: 88rpx;
				border-bottom: 1px solid #F2F2F2;
				.list_l{
					color: #6C6C6C;
				}
				.list_r{
					color: #4B4B4B;
				}
				input{
					text-align: right;
				}
			}
			.btn{
				width: 228rpx;
				height: 72rpx;
				line-height: 72rpx;
				text-align: center;
				font-size: 32rpx;
				font-weight: 500;
				color: #FFFFFF;
				background-color: #45806E;
				margin: 0 auto;
				margin-top: 40rpx;
				border-radius: 50rpx;
			}
			.text{
				width: 100%;
				text-align: center;
				color: #A2A2A2;
				font-size: 24rpx;
				margin-top: 20rpx;
			}
		}
		
	}
</style>
